<!--表单-->
<div class="tpl-portlet-components">
	<div class="portlet-title">
		<div class="caption font-green bold">
			<span class="am-icon-code"></span> 表单
		</div>
		<div class="tpl-portlet-input tpl-fz-ml">
			<div class="portlet-input input-small input-inline">
				<div class="input-icon right">
					<i class="am-icon-search"></i>
					<input type="text" class="form-control form-control-solid" placeholder="搜索..."> </div>
			</div>
		</div>

	</div>
	<div class="tpl-block">
		<div class="am-g">
			<div class="am-u-sm-12 am-u-md-3">
				<div class="am-form-group">
					<select id="types" name="typeid">
						<option value="option">所有类别</option>
                    </select>
				</div>
			</div>	
			<div class="am-u-sm-12 am-u-md-3">
				<div class="am-input-group am-input-group-sm">
					<input type="text" class="am-form-field">
					<span class="am-input-group-btn">
            <button class="am-btn  am-btn-default am-btn-success tpl-am-btn-success am-icon-search" type="button"></button>
          </span>
				</div>
			</div>
		</div>
       <!--每条博文-->
		<ul class="tpl-task-list" id="news">			
		</ul>
        <!--页码条-->
		<ul id="btns" data-am-widget="pagination" class="am-pagination am-pagination-default">
		</ul>
	</div>

</div>
<script src="assets/js/amazeui.min.js"></script>
<script type="text/javascript">
    //请求文章类型
	$.get("allTypes", function(data) {
		//console.log(data)
		$.each(data, function(i, tn) {
			$("#types").append("<option value='" + tn.id + "'>" + tn.name + "</option>");	
		});
		$.get("getPageTypeByid/0","id="+tn.id+"",function (data) {
		console.log(data)
	})
	});
	//获取页面内容
    function setUL(id,content) {//创建一个模板函数
    	$(id).empty();
    	$.each(content, function(i,cont) {
    		//console.log(cont)
    		var $li=$("<li></li>").appendTo($(id));
    		$li.load("news-li-template.html",function () {
    			var title=$li.find("#news-title").text(cont.title);
    			//var type=$li.find("#news-type").text(cont.id.typeid.name);
    			var time=$li.find("#news-time").text(cont.createTime);
    			var likes=$li.find("#news-likes").text(cont.likes);
    			var browsers=$li.find("#news-browsers").text(cont.browsers);
    			
    		});
    	});
    }
    //请求页码面
	$.get("getpage/0", function(data) {
		//console.log(data);
		var page = $.parseJSON(data);//转化为页面数据
		var btns=$("#btns");//请求页码面
		var $pre=$('<li class="am-pagination-prev "><a>上一页</a></li>').appendTo(btns);
		var totalPages=page.totalPages;//总页码数
		setUL("#news",page.content);
		for(var i=1;i<=totalPages;i++){
			var pageNo=i-1;
			$li=$("<li id='"+pageNo+"'><a>"+i+"</a></li>")
			$li.appendTo(btns);
			$li.click(function () {//点击页码
				$.get("getpage/"+this.id,function (data) {
					var curpage=$.parseJSON(data);
					setUL("#news",curpage.content);	
				});
			});
		}
		var $pre=$('<li class="am-pagination-next "><a>下一页</a></li>').appendTo(btns);
	});
	//请求类型分页
	/*$.get("getPageTypeByid/0","id="+id+"",function (data) {
		console.log(data)
	})
	*/
	
</script>
	
</body>

</html>